<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hide {
            display: none;
        }
        .active {

        }
    </style>
</head>
<body>
    <input id="inp" type="text">
    <button id="add">新增</button>
    <button id="search">搜索</button>
    <ul id="list">
        <!-- to do -->
    </ul>

    <script src="../../../demo/jq/jq.js"></script>

    <script>

        const inp = $('#inp');
        const addBtn = $('#add');
        const searchBtn = $('#search');
        const ul = $('#list');

        // 事件委托
        ul.on('click', 'li button.delete', onDelete);
        ul.on('click', 'li button.edit', onEdit);
        ul.on('click', 'li button.ok', onEditOk);

        let lastSearchValue = '';

        // 新增
        function onCreate () {
            // 创建li
            const listItem = $(`
                <li>
                    <span>${ inp.val() }</span>
                    <button class="edit">修改</button>
                    <button class="delete">删除</button>
                </li>
            `);
            // $('.edit').on('click', onEdit);
            // $('.delete').on('click', onDelete);
            // 把li追加到ul中
            ul.append(listItem);
            // 重置input
            resetInp();
        }

        // 删除
        function onDelete () {
            // el.remove删除自己
            $(this).parent().remove();
        }

        // 重置input
        function resetInp () {
            // 清空input
            inp.val('');
            // 新知识
            inp.focus(); // jq和原生写法一致
        }

        // 搜索
        function onSearch () {
            // 优化搜索逻辑（如果搜索值和上次搜索值一致，就不需要执行后续代码了）
            const currentSearchValue = inp.val();
            if (lastSearchValue === currentSearchValue) {
                return;
            }
            const spans = $('li span');
            spans.each(function (i, span) {
                if (!$(span).text().includes(currentSearchValue)) {
                    $(span).parent().addClass('hide');
                } else {
                    $(span).parent().removeClass('hide');
                }
            });
            lastSearchValue = currentSearchValue;
            // 重置input
            resetInp();
        }

        // 修改
        function onEdit () {
            const li = $(this).parent();
            // 顺便清空的之前的内容
            li.html(`
                <input type="text" value="${ li.children('span').text() }">
                <button class="ok">确认</button>
                <button class="delete">删除</button>
            `);

            // 新建的元素会失去之前的事件，所以得重新绑定事件
            // $('.ok').on('click', onEditOk);
            // $('.delete').on('click', onDelete);
        }

        // 修改确认
        function onEditOk () {
            const li = $(this).parent();
            // 顺便清空的之前的内容
            li.html(`
                <span>${ li.children('input').val() }</span>
                <button class="edit">修改</button>
                <button class="delete">删除</button>
            `);

            // 新建的元素会失去之前的事件，所以得重新绑定事件
            // $('.edit').on('click', onEdit);
            // $('.delete').on('click', onDelete);
        }

        // 键盘事件
        function onKeyUp (e) {
            switch (e.key) {
                case 'Enter':
                    onSearch();
                    break;
                // more feat here
                // 保留代码的扩展性
            
                default:
                    break;
            }
        }

        addBtn.on('click', onCreate);
        searchBtn.on('click', onSearch);
        inp.on('keyup', onKeyUp);
        

    </script>
</body>
</html>